<!-- 运费模板添加&修改 -->
<template>
  <el-dialog
    :title="id? '编辑模版' : '添加模版'"
    :visible.sync="dialogFormVisible"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRules"
    >
      <el-form-item
        label="模版类型"
        prop="templateType"
        label-width="100px"
      >
        <el-select
          v-model="dataForm.templateType"
          placeholder="请选择模版类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in temType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="ipt"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="运送类型"
        prop="transportType"
        label-width="100px"
      >
        <el-select
          v-model="dataForm.transportType"
          placeholder="请选择运送类型"
          style="width: 100%"
        >
          <el-option
            label="普快"
            value="1"
          ></el-option>
          <el-option
            label="特快"
            value="2"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="运送类型"
        prop="transportType"
        label-width="100px"
      >
        {{ changeType }}
      </el-form-item>
      <el-form-item
        label="首重价格"
        prop="firstWeight"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.firstWeight"
          placeholder="请输入首重价格"
        ><i
          slot="suffix"
          style="font-style:normal;margin-right: 10px;color: black"
        >元</i></el-input>
      </el-form-item>
      <el-form-item
        label="续重价格"
        prop="continuousWeight"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.continuousWeight"
          placeholder="请输入续重价格"
        ><i
          slot="suffix"
          style="font-style:normal;margin-right: 10px;color: black"
        >元</i></el-input>
      </el-form-item>
      <el-form-item
        label="轻抛系数"
        prop="lightThrowingCoefficient"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.lightThrowingCoefficient"
          placeholder="请输入轻抛系数"
        ></el-input>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: center;"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button
        type="warning"
        @click="addTemplate"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { freightManageOperate } from '@/api/transit'
export default {
  data() {
    return {
      dialogFormVisible: false, // 弹框开关
      temType: [ // 模版类型
        { label: '同城寄', value: '1' },
        { label: '省内寄', value: '2' },
        { label: '经济区互寄', value: '3' },
        { label: '跨省', value: '4' }
      ],
      dataForm: {
        associatedCityList: ['22'], // 关联城市
        continuousWeight: null, // 续重价格
        firstWeight: null, // 首重价格
        id: '',
        lightThrowingCoefficient: null, // 轻抛系数
        templateType: null, // 模版类型
        transportType: null // 运送类型
      },
      dataRules: {
        templateType: [
          { required: true, message: '请选择模版类型', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '请选择运送类型', trigger: 'change' }
        ],
        firstWeight: [
          { required: true, message: '请输入首重价格', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '请输入续重价格', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请输入轻抛系数', triger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    changeType() {
      if (this.dataForm.transportType) {
        if (this.dataForm.transportType === '1') {
          return '普快'
        } else if (this.dataForm.transportType === '2') {
          return '特快'
        }
      } else {
        return '全国'
      }
    },
    id() {
      return this.dataForm.id
    }
  },
  methods: {
    // 提交表单
    async addTemplate() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // 通过校验后的逻辑
          const res = await freightManageOperate(this.dataForm)
          // 状态码为200则成功
          if (res.code === 200) {
            // 弹框
            this.$message.success(`${this.id ? '修改成功' : '添加成功'}`)
            // 重置表单
            this.$refs.dataForm.resetFields()
            // 关闭弹框
            this.dialogFormVisible = false
            // 重新拉取表单
            this.$emit('getList')
          } else {
            this.$message.error(res.data.msg)
          }
        }
      })
    },
    // 关闭弹框
    closeDialog() {
      // 清空表单
      this.dataForm = {
        associatedCityList: ['22'], // 关联城市
        continuousWeight: null, // 续重价格
        firstWeight: null, // 首重价格
        id: '',
        lightThrowingCoefficient: null, // 轻抛系数
        templateType: null, // 模版类型
        transportType: null // 运送类型
      }
      this.$refs.dataForm.resetFields()
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
